<template>
  <view class="comment-list">
    <view class="comment-title">评论 {{ comments.length }}</view>
    <view
      v-for="comment in comments"
      :key="comment.id"
    >
      <CommentItem
        :comment="comment"
        @like="onLike"
        @reply="onReply"
      />
    </view>
    <view
      v-if="!comments.length"
      class="comment-empty"
    >
      暂时没有更多了~
    </view>
  </view>
</template>

<script>
  import CommentItem from './CommentItem.vue'
  export default {
    name: 'CommentList',
    components: { CommentItem },
    props: {
      comments: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      onLike(commentId) {
        this.$emit('like', commentId)
      },
      onReply(commentId) {
        this.$emit('reply', commentId)
      }
    }
  }
</script>

<style scoped lang="scss">
  .comment-list {
    background: #fff;
    border-radius: 16rpx;
    margin: 24rpx 0 0 0;
    padding: 0 0 24rpx 0;
  }
  .comment-title {
    color: #333;
    font-size: 28rpx;
    font-weight: 600;
    padding: 32rpx 32rpx 0 32rpx;
  }
  .comment-empty {
    color: #999999;
    font-size: 24rpx;
    text-align: center;
    padding: 40rpx 0 0 0;
  }
</style>
